<script lang="ts" setup>
import { ElButton, ElInput, Sort, ElDatePicker, type DateModelType } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { Table } from '@/components/Table'
import { getRoomHistoryListApi, delRoomHistoryListApi } from '@/api/room-history'
import { useTable } from '@/hooks/web/useTable'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { TableColumn } from '@/types/table'
import { Search, SearchItem } from '@/components/Search'
import { RoomHistory } from '@/api/room-history/types'
import { formatDate } from '@/utils'

defineOptions({
  name: 'RoomHistory'
})

const { push } = useRouter()

interface Conditions {
  openid: string
  dates: [DateModelType, DateModelType]
  room: string
  confirm_number: string
}

const conditions = reactive<Conditions>({
  openid: '',
  dates: [dayjs().add(-30, 'days').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  room: '',
  confirm_number: ''
})

const defaultSort = ref<Sort>({
  prop: 'created_at',
  order: 'descending'
})

const formatSearchParams = async (data: Conditions) => {
  return {
    openid: data.openid,
    start: data.dates[0],
    end: data.dates[1],
    room: data.room,
    confirm_number: data.confirm_number
  }
}

const { register, tableObject, methods } = useTable<RoomHistory>({
  getListApi: getRoomHistoryListApi,
  delListApi: delRoomHistoryListApi,
  formatSearchParams,
  defaultSort: defaultSort.value
})

const { setSearchParams, onSortChanged } = methods

setSearchParams(conditions)

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'openid',
    label: '小程序id',
    width: '300px'
  },
  {
    field: 'confirm_number',
    label: '确认号',
    width: 'auto',
    showOverflowTooltip: true
  },
  {
    field: 'room',
    label: '房号',
    width: '200px'
  },
  {
    field: 'origin_room',
    label: '原房号',
    width: '200px'
  },
  {
    field: 'created_at',
    label: '操作日期',
    width: '200px',
    formatter(row: RoomHistory) {
      return formatDate(row.created_at, 'YYYY-MM-DD HH:mm:ss')
    }
  }
])

const DownloadAction = () => {
  push('/geography/region-add')
}

const EditAction = (row: RoomHistory) => {
  push(`/geography/region-edit/id/${row.id}`)
}

const delLoading = ref(false)

const delData = async (row: RoomHistory) => {
  tableObject.currentRow = row
  const { delList } = methods
  delLoading.value = true
  await delList([tableObject.currentRow?.id as string], false).finally(() => {
    delLoading.value = false
  })
}
</script>

<template>
  <Search :model="conditions" @reset="setSearchParams" @search="setSearchParams">
    <SearchItem label="日期" prop="nickname">
      <ElDatePicker
        v-model="conditions.dates"
        :clearable="false"
        type="daterange"
        value-format="YYYY-MM-DD"
      />
    </SearchItem>
    <SearchItem label="房号" prop="room">
      <ElInput v-model="conditions.room" clearable maxlength="50" />
    </SearchItem>
    <SearchItem label="确认号" prop="confirm_nnumber">
      <ElInput v-model="conditions.confirm_number" clearable maxlength="50" />
    </SearchItem>
    <SearchItem label="小程序id" prop="openid">
      <ElInput v-model="conditions.openid" clearable maxlength="50" />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <ElButton :icon="Plus" type="primary" @click="DownloadAction">下载</ElButton>
        <Icon class="mr-8px ml-8px cursor-pointer" icon="ep:refresh-right" />
      </div>
    </div>

    <Table
      v-model:currentPage="tableObject.currentPage"
      v-model:pageSize="tableObject.pageSize"
      :columns="tableColumns"
      :data="tableObject.tableList"
      :default-sort="defaultSort"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      :selection="false"
      @register="register"
      @sort-change="onSortChanged"
    />
  </div>
</template>
